<template lang="html">
<!-- banner -->
<section class="banner">
  <div class="banner-inner">
    <div class="inner-1200"> 
      <div class="home_tag_wrap clearfixed">
        <button class="ser-btn" id="ser-btn">贴心服务</button>
        <ul class='home_tag_left'>
          <li name='first' :class='{isbackground:isbackground=="first"}' v-on:click='tagLeft("first")' ref='firstImg'><img src="../../../assets/img/findproduct_1.png" alt="" v-show='show_1'><img src="../../../assets/img/findproduct_2.png" alt=""  v-show='!show_1'>找产品</li>
          <li name='second' :class='{isbackground:isbackground=="second"}' v-on:click='tagLeft("second")'><img src="../../../assets/img/findmoney_1.png" alt=""  v-show='show_2'><img src="../../../assets/img/findmoney_2.png" alt=""  v-show='!show_2'>找资金</li>
          <li name='third' :class='{isbackground:isbackground=="third"}' v-on:click='tagLeft("third")'><img src="../../../assets/img/findcourse.png" alt="" v-show='show_3'><img src="../../../assets/img/findcourse_2.png" alt=""  v-show='!show_3'>找客户</li>
          <li name='forth' :class='{isbackground:isbackground=="forth"}' v-on:click='tagLeft("forth")'><img src="../../../assets/img/findtechnology.png" alt="" v-show='show_4'><img src="../../../assets/img/findtechnology_2.png" alt="" v-show='!show_4'>找技术</li>
        </ul>
        <div class="home_tag_right">
          <div class="tag_right_first" v-show='show_1'>
            <form action="" >
              <div class="tag_right_one clearfixed">
                <input type="text" placeholder="请输入牌号,厂商搜索" class='tag_right_one_top'>
                <button class="right_search_btn" type="button" @click='right_search'>
                  <img src="../../../assets/img/search.png" alt="">
                </button>
              </div>
              <div class="tag_right_two">
                热门搜索:<a href="javascript::" target='_blank' v-for='searchthing in hot_search'>{{searchthing.productName}}</a>
              </div>
              <div class="tag_right_three">
                <span class='title'>
                  分类
                </span>
                <div class="three_content">
                  <input type="text" v-model='showtype'  class='option_content'>
                  <select name="" id="" @change='selectType' v-model='findtype'>
                    <option :value="item.selectVal" v-for='item in find_type'>{{item.selectVal}}</option>
                  </select>
                  <img src="../../../assets/img/select_tag.png" alt="">
                </div>
              </div>
              <div class="tag_right_three" style="margin:21px 0 21px 0">
                <span class='title'>
                  产地
                </span>
                <div class="three_content">
                  <input type="text" v-model='showplace'  class='option_content'>
                  <select name="" id="" @change='selectplace' v-model='findplace'>
                    <option :value="item1.placeVal" v-for='item1 in find_place'>{{item1.placeVal}}</option>
                  </select>
                  <img src="../../../assets/img/select_tag.png" alt="">
                </div>
              </div>
              <div class="tag_right_three" style="margin:21px 0 21px 0">
                <span class='title'>
                  交货地
                </span>
                <div class="three_content">
                  <input type="text" v-model='showdelivery'  class='option_content'>
                  <select name="" id="" @change='deliveryplace' v-model='delselplace'>
                    <option :value="item2.placeVal" v-for='item2 in delivery_place'>{{item2.placeVal}}</option>
                  </select>
                  <img src="../../../assets/img/select_tag.png" alt="">
                </div>
              </div>
              <button type="button" class='fprBtn'>搜索</button>
            </form>
          </div>
          <!-- 找资金 -->
          <div class="tag_right_first" v-show='!show_2'>
            <form action="" >
              <div class="tag_right_one clearfixed">
                <input type="text" placeholder="请sdf输入牌号,厂商搜索" class='tag_right_one_top'>
                <button class="right_search_btn" type="button" @click='right_search'>
                  <img src="../../../assets/img/search.png" alt="">
                </button>
              </div>
              <div class="tag_right_two">
                热门搜索:<a href="javascript::" target='_blank' v-for='searchthing in hot_search'>{{searchthing.productName}}</a>
              </div>
              <div class="tag_right_three">
                <span class='title'>
                  分类
                </span>
                <div class="three_content">
                  <input type="text" v-model='showtype'  class='option_content'>
                  <select name="" id="" @change='selectType' v-model='findtype'>
                    <option :value="item.selectVal" v-for='item in find_type'>{{item.selectVal}}</option>
                  </select>
                  <img src="../../../assets/img/select_tag.png" alt="">
                </div>
              </div>
              <div class="tag_right_three" style="margin:21px 0 21px 0">
                <span class='title'>
                  产地
                </span>
                <div class="three_content">
                  <input type="text" v-model='showplace'  class='option_content'>
                  <select name="" id="" @change='selectplace' v-model='findplace'>
                    <option :value="item1.placeVal" v-for='item1 in find_place'>{{item1.placeVal}}</option>
                  </select>
                  <img src="../../../assets/img/select_tag.png" alt="">
                </div>
              </div>
              <div class="tag_right_three" style="margin:21px 0 21px 0">
                <span class='title'>
                  交货地
                </span>
                <div class="three_content">
                  <input type="text" v-model='showdelivery'  class='option_content'>
                  <select name="" id="" @change='deliveryplace' v-model='delselplace'>
                    <option :value="item2.placeVal" v-for='item2 in delivery_place'>{{item2.placeVal}}</option>
                  </select>
                  <img src="../../../assets/img/select_tag.png" alt="">
                </div>
              </div>
              <button type="button" class='fprBtn'>搜索</button>
            </form>
          </div>
        </div>
      </div>
    </div>
</div>
  <div class="block home_wrap">
    <el-carousel class="my-swiper-box"  height="420px">
      <!-- for循环轮播 -->
      <el-carousel-item :key='1' class='home_carousel'>
        <a href="" title="">
          <img src="../../../assets/img/banner_1.jpg" alt="">
        </a>
      </el-carousel-item>
      <el-carousel-item :key='1' class='home_carousel'>
        <a href="" title="">
          <img src="../../../assets/img/banner_1.jpg" alt="">
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</section>

</template>

<script lang="js">
  export default  {
    name: 'banner',
    props: [],
    mounted() {

    },
    data() {
       return {
     banner:[],
     height:'420px',
     isbackground:'first',
     show_1:true,
     show_2:true,
     show_3:true,
     show_4:true,
     hot_search:[],
     find_type:[],
     findtype:'',
     showtype:'全部',
     showplace:'全部',
     findplace:'',
     find_place:[],
     delivery_place:[],
     delselplace:'',
     showdelivery:'全部',
     tableData:[{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
     }],  // 自选列表清单


    }
    },
    methods: {
      // 左侧导航,
       tagLeft(str) {
      var that = this;
      this.isbackground = str;
      if (str == "first") {
        that.show_1 = true;
        that.show_2 = true;
        that.show_3 = true;
        that.show_4 = true;
      } else if (str == "second") {
        that.show_1 = false;
        that.show_2 = false;
        that.show_3 = true;
        that.show_4 = true;
      } else if (str == "third") {
        that.show_1 = false;
        that.show_2 = true;
        that.show_3 = false;
        that.show_4 = true;
      } else if (str == "forth") {
        that.show_1 = false;
        that.show_2 = true;
        that.show_3 = true;
        that.show_4 = false;
      }
    },
    right_search() {
      if ($(".tag_right_one_top").val() != "") {
        $(".right_search_btn").attr("type", "submit");
      }
    },
    //
    selectType() {
      this.showtype = this.findtype;
    },
    selectplace() {
      this.showplace = this.findplace;
    },
    deliveryplace() {
      this.showdelivery = this.delselplace;
    }
    },
    computed: {

    }
}
</script>

<style scoped lang="scss">
input{
  outline: none;
  text-indent: 15px;
}
.banner {
  position: relative;
  height: 420px;
}
.banner-inner{
  position: absolute;
  top:0;
  left: 0;
  width:100%;
}
.inner-1200{
  width:1200px;
  margin:0 auto;
}
.ser-btn{
    width: 154px;
    height: 46px;
    background: #009fe2;
    text-align: center;
    line-height: 46px;
    position: absolute;
    left: 0;
    top: -47px;
    color: #ffffff;
    border: 0;
    cursor: pointer;
  
}
.home_tag_wrap{
  position:relative;
  border-left:0;
  top:2px; 
}
$Height:300px;
.home_wrap {
  position: relative;
  height: $Height;
  .my-swiper-box {
    width: 100%;
    overflow: hidden;
  }
  .home_carousel {
    border-top: 2px solid #009fe2;
    width: 100%;
    a {
      height: $Height;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.home_tag_wrap {
  width: 522px;
  height: 406px;
  z-index: 1000;
  background: #fff;
  border-left: 6px solid #009fe2;
  .home_tag_left {
    width: 154px;
    float: left;
    li {
      height: 100px;
      line-height: 100px;
      text-align: center;
      background: #009fe2;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
      img {
        margin-right: 19px;
      }
    }
    li:nth-child(2),
    li:nth-child(3),
    li:nth-child(4) {
      margin-top: 2px;
    }
    .isbackground {
      background: #fff;
      color: #009fe2;
    }
  }
  .home_tag_right {
    float: left;
    width: 285px;
    height: 365px;
    margin: 20px 0 0 30px;
    .tag_right_first {
      .tag_right_one {
        width: 100%;
        height: 37px;
        border: 1px solid #009fe2;
        border-radius: 4px;
        .tag_right_one_top {
          float: left;
          width: 205px;
          height: 33px;
          border: none;
        }
        .right_search_btn {
          float: right;
          width: 58px;
          height: 36px;
          background: #009fe2;
          border: none;
        }
      }
      .tag_right_two {
        color: #999;
        margin-top: 8px;
        a {
          color: #999;
          margin-right: 13px;
        }
        a:nth-child(1) {
          margin-left: 5px;
        }
      }
      .tag_right_three {
        margin: 26px 0 21px 0;
        span {
          font-size: 14px;
          margin-bottom: 9px;
          display: inline-block;
        }
        .three_content {
          color: #333;
          position: relative;
          width: 100%;
          height: 37px;
          border: 1px solid #bbb;
          border-radius: 4px;
          .option_content {
            position: absolute;
            top: 0;
            border: none;
            width: 220px;
            height: 32px;
            font-size: 12px;
            line-height: 35px;
          }
          select {
            width: 100%;
            height: 33px;
            border-radius: 4px;
            border: none;
            z-index: 100;
            opacity: 0;
          }
          img {
            position: absolute;
            right: 0;
            top: -1px;
            z-index: -10;
          }
        }
      }
      .fprBtn {
        width: 100%;
        height: 37px;
        color: #fff;
        font-size: 14px;
        border: none;
        border-radius: 4px;
        background: #009fe2;
      }
    }
  }
}
</style>
